<!-- <template>
  <div>
    <cropper :src="src" />
    <n-upload :on-before-upload="handleBeforeUpload">
      <n-button>上传文件</n-button>
    </n-upload>
  </div>
</template>

<script lang="ts" setup>
import { UploadFileInfo } from "naive-ui";
let filename = "";
const src = ref("");
const previewSource = ref("");
// Block upload
function handleBeforeUpload({
  file,
}: {
  file: UploadFileInfo;
  fileList: UploadFileInfo[];
}) {
  const reader = new FileReader();
  reader.readAsDataURL(file.file!);
  src.value = "";
  previewSource.value = "";
  reader.onload = function (e) {
    src.value = (e.target?.result as string) ?? "";
    filename = file.name;
  };
  return false;
}
</script>

<style lang="scss" scoped></style> -->

<template>
  <div>
    <cropper-modal v-model:show="showCropper" :circled="true"></cropper-modal>
    <n-button @click="showCropper = true">open</n-button>
  </div>
</template>

<script lang="ts" setup>
const showCropper = ref(false);
</script>

<style scoped></style>
